<template>
  <div id="app">
    <topbar class="topbar"></topbar>
    <div class="content">
      <div class="main">
        <h1 class="title">登录</h1>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item prop="name" class="name_label" >
            <el-input v-model="ruleForm.name" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input v-model="ruleForm.pwd" placeholder="密码" show-password @keyup.enter.native="submitForm('ruleForm')"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即登录</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <router-link to="/regist"><el-button type="success" class="regist">注册</el-button></router-link>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <footbar class="footbar"></footbar>
  </div>
</template>

<script>
import topbar from '../public/topbar.vue'
import footbar from '../public/footbar.vue'
import CrypoJS from 'crypto-js'

export default {
  data() {
    return {
      ruleForm: {
        name: "",
        pwd: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 12, message: "长度在 2 到 12 个字符", trigger: "blur" },
        ], 
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if(valid) {
          this.axios.post('http://www.liujn.top/bbs/api/user/login',{ 
              username: this.ruleForm.name,
              password: CrypoJS.MD5(this.ruleForm.pwd).toString(),
            }
          ).then((res) => {
            if(res.data == "-1") {
              this.$message.error('用户名不存在')
            } else if (res.data == "-2") {
              this.$message.error("密码错误")
            } else if (res.data.SessionId) {
              this.$cookies.set("CookieId", res.data.SessionId, 60 * 60 * 24 * 30)
              this.$cookies.set("UserAvatar", res.data.user.avatar, 60 * 60 * 24 * 30)
              this.$cookies.set("UserName", res.data.user.username, 60 * 60 * 24 * 30)
              this.$message({
                message: '登录成功',
                type: "success",
                offset: 50
              }),
              this.$router.push('/article')
            }
            else {
              this.$message.error("未知登录错误")
            }
          })
        } else {
          return false;
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  name: '',
  components: {
    topbar,
    footbar
  }
};
</script>

<style scoped>

#app {
  background-image: url("../../assets/login_bg.jpg");
  background-size: 1920px 100%;
}

.content {
  margin: 0 auto;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.main {
  /* height: 300px; */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.demo-ruleForm {
  margin: 0 auto;
  width: 80%;
  max-width: 400px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif;
}

.regist {
  margin-left: 12px
}

.title {
  margin-bottom: 20px;
}

.topbar {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1;
}

.footbar {
  width: 100%;
  position: absolute;
  bottom: 0px;
}



div /deep/.el-form-item__label{
  color: white;
}

/* video{
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index:-9999;
  } */

h1 {
  align-self: center;
  color: white;
  font-weight: 400;
  margin: 0px 0px 0px 20px;
  letter-spacing: 30px;
}
</style>
